<template>
  <div class="x-container">
    <div class="x-nav">
      <el-tabs @tab-click="handleTabClick" v-model="activeName">
        <el-tab-pane label="基本信息" name="baseMessage"></el-tab-pane>
        <el-tab-pane label="审查流程" name="checkProcess"></el-tab-pane>
      </el-tabs>
    </div>
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import baseMessage from "./components2/baseMessage";
import checkProcess from "./components2/checkProcess";
export default {
  components: {
    baseMessage,
    checkProcess
  },
  data() {
    return {
      currentComponent: baseMessage,
      activeName: "baseMessage"
    };
  },
  methods: {
    handleTabClick: function(target) {
      this.currentComponent = target.name;
    }
  }
};
</script>

<style lang="scss" scoped>
.x-nav /deep/ .el-tabs__header {
  margin: 0;
}
.x-nav /deep/ .el-tabs__nav-wrap::after {
  display: none;
}
</style>

<style scoped="scoped" lang="scss">
.x-container {
  width: 100%;
  min-height: calc(100vh - 114px);
  padding: 20px;
  background: rgba(247, 248, 250, 1);
  .x-nav {
    background-color: #fff;
    padding-left: 20px;
  }
}
</style>